import React, { useEffect, useState } from 'react';
import { AxFormItemBase } from '../lib/AxFormItemBase';
import { AxAxFroalaEditorProps, AxFroalaEditorViewProps } from './data';
import 'froala-editor/js/plugins.pkgd.min.js';
// import 'froala-editor/js/froala_editor.pkgd.min.js';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditor from 'react-froala-wysiwyg';
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
import { axurl } from '@/shared/axurl';

/** 自定义FroalaEditor */
export const AxFroalaEditor: React.FC<AxAxFroalaEditorProps> = props => {
    const { isLabel = false, value: valueFromProps, height, heightMin, ...rest } = props;
    const [value, setValue] = useState<any>();

    useEffect(() => {
        setValue(valueFromProps);
    }, [valueFromProps]);

    const handleModelChange = (v: any) => {
        setValue(v);
    }

    /** 工具栏按钮配置 */
    var toolbarButtons = [
        'fullscreen',//全屏
        'bold',//粗体
        'italic',//斜体
        'underline',//下划线
        // 'strikeThrough', //删除线
        // 'subscript',//下标
        // 'superscript',//上标
        'paragraphFormat', //段落格式（标题1、标题2）
        'fontFamily',//字体
        'color', //字体颜色
        'fontSize',//字体大小
        '|',
        // 'emoticons',//表情符
        // 'inlineStyle',//内联样式
        // 'paragraphStyle',//段落样式
        // '|',
        'align', //对齐方式
        // 'formatOL',
        'formatUL',
        // 'outdent',
        // 'indent',
        // 'quote',
        'insertHR',//分割线
        // '-',
        'insertLink',//链接
        'insertImage',//插入图片
        // 'insertVideo',//插入视频
        // 'insertFile',//插入文件
        'insertTable',//插入表格
        'undo',//撤销
        'redo',//恢复
        'clearFormatting',//清空样式
        // 'selectAll',//选中所有
        'html'//html编码
    ];

    const localProps = {
        tag: 'textarea',
        value: value,
        onModelChange: handleModelChange,
        valuePropName: { valuePropName: 'model' },
        config: {
            height: height,
            heightMin: heightMin,
            requestHeaders: {
                authorization: localStorage.getItem('ax-auth-token')
            },
            placeholderText: '请在这里编辑内容！',
            // charCounterCount: false,
            // toolbarButtonsMD: toolbarButtonsMD,
            // toolbarButtonsSM: toolbarButtonsSM,
            // toolbarButtonsXS: toolbarButtonsXS,
            toolbarButtons: toolbarButtons,
            imageUploadURL: axurl.comm.uploadFile,
            // events: {
            //     'image.uploaded': function (res: any) {
            //     }
            // }
            // imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager']
        }
    };

    if (isLabel === true) {
        return <FroalaEditorView
            model={value}
        />;
    }
    return <AxFormItemBase WrappedComponent={FroalaEditor} {...localProps} {...rest} />;
};

export const AxFroalaEditorView: React.FC<AxFroalaEditorViewProps> = props => {
    const localProps = {
        config: {
            height: 500,
            heightMin: 200,
            editorClass: 'custom-class'
        }
    };

    return (
        <FroalaEditorView
            {...localProps}
            {...props}
        />
    )
}
